<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const handleOk = () => {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      visible.value = false;
    }, 2000);
  };
  const handleCancel = () => {
    visible.value = false;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">自定义页脚</div>
    <div class="demo-content">
      <Button type="primary" @click="showModal">Open Modal with customized footer</Button>
      <Modal v-model:visible="visible" title="Title" @ok="handleOk">
        <template #footer>
          <Button key="back" @click="handleCancel">Return</Button>
          <Button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</Button>
        </template>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  </div>
</template>
